<script lang="ts" setup>
import { computed } from 'vue'

interface IOption {
  label: string
  value: string | number | undefined
}

interface IProps {
  title: string
  options: IOption[]
  labelWidth?: string
  hasAll?: boolean
  align?: 'flex-start' | 'flex-end' | 'center'
}

const {
  title,
  options,
  labelWidth = '50px',
  hasAll = false,
  align = 'flex-end',
} = defineProps<IProps>()

const modelValue = defineModel()

const optionList = computed(() => {
  const _options = [...options]
  if (hasAll) {
    _options.unshift({
      label: '全部',
      value: undefined,
    })
  }
  return _options
},
)
</script>

<template>
  <dl class="filter">
    <dt class="filter-title">
      {{ title }}：
    </dt>

    <div class="filter-item__wrapper">
      <template
        v-for="option in optionList"
        :key="option.value"
      >
        <dd
          v-if="option.label"
          class="filter-item"
          :class="[
            {
              active: option.value === modelValue,
            },
          ]"
          @click="modelValue = option.value"
        >
          {{ option.label }}
        </dd>
      </template>
    </div>
  </dl>
</template>

<style lang="less" scoped>
.filter {
  display: flex;

  column-gap: 10px;
}

.filter-title {
  display: flex;
  align-items: center;
  min-inline-size: v-bind(labelWidth);
  justify-content: v-bind(align);
}

.filter + .filter {
  margin-block-start: 16px;
}

.filter-item__wrapper {
  display: flex;
  flex-wrap: wrap;

  column-gap: 12px;
  row-gap: 10px;
}

.filter-item {
  padding: 2px 6px;

  cursor: pointer;

  border-radius: 6px;

  &__wrapper {
    display: flex;
    flex-wrap: wrap;

    row-gap: 10px;
  }
}

.filter-item:hover,
.filter-item.active {
  color: #fff;
  background-color: var(--el-color-primary);
}
</style>
